<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

<title>Test site by Vitaliy Danilyuk</title>
    
<!-- css -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,600,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/style1.css" />
    <link rel="stylesheet" href="css/style2.css" />
<link rel="stylesheet" href="css/jquery.fullPage.css" />
<link rel="stylesheet" href="css/map.css" />
<link rel="stylesheet" href="css/swipebox.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/examples.css" />
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.fullPage.js"></script>
    <script type="text/javascript" src="js/jquery.swipebox.js"></script>
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script type="text/javascript" src="js/portfolio.js"></script>
</head>



<body>

<nav class="menu slide-menu-left">
    <ul>
        <div class="close-menu">x</div>
        <li><a href="#Home">Home</a></li>
        <li><a href="#Portfolio">Portfolio</a></li>
        <li><a href="#Blog">Blog</a></li>
        <li><a href="#Contact">Contact</a></li>
    </ul>
    <div class="nav_social">
        <a href="#"><i class="fb"> </i></a>
        <a href="#"><i class="tw"> </i></a>
        <a href="#"><i class="googleplus"> </i></a>
        <a href="#"><i class="flicker"> </i></a>
        <a href="#"><i class="pin"> </i></a>
        <a href="#"><i class="vimeo"> </i></a>
    </div>
</nav><!-- /slide menu left -->
<button class="toggle-slide-left" style="position: absolute; z-index: 999; top:15px; left:15px; width: 39px; height: 39px;background-image: url('img/menu.png')"></button>

<div id="fullpage">

    <div class="section " id="section0">
    </div>

    <div class="section" id="section1">
        <div id='loading_wrap' class="slide-loading overlay-loading"><div></div></div>
        <div id="portfolio-menu">
            <div id="portfolio-label">PORTFOLIO</div>
            <ul id="portfolio-move" class="portfolio-navigation">
                <li><a id="moveLeft" href="#" class="move-button" onclick="goLeft()"><</a></li>
                <li><a id="moveLabel" href="#" class="move-button" onclick="goBack()">NEXT</a></li>
                <li><a id="moveRight" href="#" class="move-button" onclick="goRight()">></a></li>
            </ul>
            <ul id="portfolio-slides" class="portfolio-navigation">
                <li><a href="#Portfolio" onclick="slideIndex = 0; $('#moveLabel').text('NEXT');">ALL</a></li>
                <li><a href="#Portfolio/1" onclick="slideIndex = 1; $('#moveLabel').text('BACK');">CARS</a></li>
                <li><a href="#Portfolio/2" onclick="slideIndex = 2; $('#moveLabel').text('BACK');">FASHION</a></li>
            </ul>
            <img  src="img/Portfolio-bg.png" width="100%">
        </div>


        <div class="slide" id="slide1a">
            <div class="masonry">
            <div class="swipebox-with-description">
                <img class="swipebox" src="img/Portfolio-bg.png" style="width:100%" alt="image">
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/car1.jpg" class="swipebox">
                    <div class="overlay"><div>description car1.jpg</div></div>
                    <img src="img/car1.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/fa2.jpg" class="swipebox">
                    <div class="overlay"><div>description fa2.jpg</div></div>
                    <img src="img/fa2.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/car3.jpg" class="swipebox">
                    <div class="overlay"><div>description car3.jpg</div></div>
                    <img src="img/car3.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/fa4.jpg" class="swipebox">
                    <div class="overlay"><div>description fa4.jpg</div></div>
                    <img src="img/fa4.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/car5.jpg" class="swipebox">
                    <div class="overlay"><div>description car5.jpg</div></div>
                    <img src="img/car5.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/fa6.jpg" class="swipebox">
                    <div class="overlay"><div>description fa6.jpg</div></div>
                    <img src="img/fa6.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/car7.jpg" class="swipebox">
                    <div class="overlay"><div>description car7.jpg</div></div>
                    <img src="img/car7.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/fa8.jpg" class="swipebox">
                    <div class="overlay"><div>description fa8.jpg</div></div>
                    <img src="img/fa8.jpg" alt="image">
                </a>
            </div>
            <div class="swipebox-with-description">
                <a rel="gallery-2" href="img/car9.jpg" class="swipebox">
                    <div class="overlay"><div>description car9.jpg</div></div>
                    <img src="img/car9.jpg" alt="image">
                </a>
            </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/fa10.jpg" class="swipebox">
                        <div class="overlay"><div>description fa10.jpg</div></div>
                        <img src="img/fa10.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/car11.jpg" class="swipebox">
                        <div class="overlay"><div>description car11.jpg</div></div>
                        <img src="img/car11.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/fa12.jpg" class="swipebox">
                        <div class="overlay"><div>description fa12.jpg</div></div>
                        <img src="img/fa12.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/car13.jpg" class="swipebox">
                        <div class="overlay"><div>description car13.jpg</div></div>
                        <img src="img/car13.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/fa14.jpg" class="swipebox">
                        <div class="overlay"><div>description fa14.jpg</div></div>
                        <img src="img/fa14.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/car15.jpg" class="swipebox">
                        <div class="overlay"><div>description car15.jpg</div></div>
                        <img src="img/car15.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-2" href="img/fa16.jpg" class="swipebox">
                        <div class="overlay"><div>description fa16.jpg</div></div>
                        <img src="img/fa16.jpg" alt="image">
                    </a>
                </div>
            </div>
        </div>

        <div class="slide" id="slide2a">
            <div class="masonry">
                <div class="swipebox-with-description">
                    <img class="swipebox" src="img/Portfolio-bg.png" style="width:100%" alt="image">
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car1.jpg" class="swipebox">
                        <div class="overlay"><div>description car1.jpg</div></div>
                        <img src="img/car1.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car2.jpg" class="swipebox">
                        <div class="overlay"><div>description car2.jpg</div></div>
                        <img src="img/car2.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car3.jpg" class="swipebox">
                        <div class="overlay"><div>description car3.jpg</div></div>
                        <img src="img/car3.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car4.jpg" class="swipebox">
                        <div class="overlay"><div>description car4.jpg</div></div>
                        <img src="img/car4.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car5.jpg" class="swipebox">
                        <div class="overlay"><div>description car5.jpg</div></div>
                        <img src="img/car5.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car6.jpg" class="swipebox">
                        <div class="overlay"><div>description car6.jpg</div></div>
                        <img src="img/car6.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car7.jpg" class="swipebox">
                        <div class="overlay"><div>description car7.jpg</div></div>
                        <img src="img/car7.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car8.jpg" class="swipebox">
                        <div class="overlay"><div>description car8.jpg</div></div>
                        <img src="img/car8.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car9.jpg" class="swipebox">
                        <div class="overlay"><div>description car9.jpg</div></div>
                        <img src="img/car9.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car10.jpg" class="swipebox">
                        <div class="overlay"><div>description car10.jpg</div></div>
                        <img src="img/car10.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car11.jpg" class="swipebox">
                        <div class="overlay"><div>description car11.jpg</div></div>
                        <img src="img/car11.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car12.jpg" class="swipebox">
                        <div class="overlay"><div>description car12.jpg</div></div>
                        <img src="img/car12.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car13.jpg" class="swipebox">
                        <div class="overlay"><div>description car13.jpg</div></div>
                        <img src="img/car13.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car14.jpg" class="swipebox">
                        <div class="overlay"><div>description car14.jpg</div></div>
                        <img src="img/car14.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car15.jpg" class="swipebox">
                        <div class="overlay"><div>description car15.jpg</div></div>
                        <img src="img/car15.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-3" href="img/car16.jpg" class="swipebox">
                        <div class="overlay"><div>description car16.jpg</div></div>
                        <img src="img/car16.jpg" alt="image">
                    </a>
                </div>
            </div>
        </div>

        <div class="slide" id="slide3a">
            <div class="masonry">
                <div class="swipebox-with-description">
                    <img class="swipebox" src="img/Portfolio-bg.png" style="width:100%" alt="image">
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa1.jpg" class="swipebox">
                        <div class="overlay"><div>description fa1.jpg</div></div>
                        <img src="img/fa1.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa2.jpg" class="swipebox">
                        <div class="overlay"><div>description fa2.jpg</div></div>
                        <img src="img/fa2.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa3.jpg" class="swipebox">
                        <div class="overlay"><div>description fa3.jpg</div></div>
                        <img src="img/fa3.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa4.jpg" class="swipebox">
                        <div class="overlay"><div>description fa4.jpg</div></div>
                        <img src="img/fa4.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa5.jpg" class="swipebox">
                        <div class="overlay"><div>description fa5.jpg</div></div>
                        <img src="img/fa5.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa6.jpg" class="swipebox">
                        <div class="overlay"><div>description fa6.jpg</div></div>
                        <img src="img/fa6.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa7.jpg" class="swipebox">
                        <div class="overlay"><div>description fa7.jpg</div></div>
                        <img src="img/fa7.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa8.jpg" class="swipebox">
                        <div class="overlay"><div>description fa8.jpg</div></div>
                        <img src="img/fa8.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa9.jpg" class="swipebox">
                        <div class="overlay"><div>description fa9.jpg</div></div>
                        <img src="img/fa9.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa10.jpg" class="swipebox">
                        <div class="overlay"><div>description fa10.jpg</div></div>
                        <img src="img/fa10.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa11.jpg" class="swipebox">
                        <div class="overlay"><div>description fa11.jpg</div></div>
                        <img src="img/fa11.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa12.jpg" class="swipebox">
                        <div class="overlay"><div>description fa12.jpg</div></div>
                        <img src="img/fa12.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa13.jpg" class="swipebox">
                        <div class="overlay"><div>description fa13.jpg</div></div>
                        <img src="img/fa13.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa14.jpg" class="swipebox">
                        <div class="overlay"><div>description fa14.jpg</div></div>
                        <img src="img/fa14.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa15.jpg" class="swipebox">
                        <div class="overlay"><div>description fa15.jpg</div></div>
                        <img src="img/fa15.jpg" alt="image">
                    </a>
                </div>
                <div class="swipebox-with-description">
                    <a rel="gallery-1" href="img/fa16.jpg" class="swipebox">
                        <div class="overlay"><div>description fa16.jpg</div></div>
                        <img src="img/fa16.jpg" alt="image">
                    </a>
                </div>
            </div>
        </div>

    </div>

    <div class="section" id="section2">
        <div class="slide" id="slide1b">
            <div class="intro">
                <p>Blog</p>
            </div>
        </div>

        <div class="slide" id="slide2b">
            <h1>Slide 2</h1>
        </div>

    </div>

    <div class="section" id="section3">
            <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d84667.12789223932!2d35.02899074738171!3d48.459450743555344!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sru!2sin!4v1416068617302"> </iframe>
            </div>
            <div class="contact_mask"> </div>
            <div class="contact_right">
                <h3>Contact</h3>
                <ul class="contact_address">
                    <li>Dniepropetrovsk, Ukraine <i class="location"> </i></li>
                    <li>Skype: elstan88 <i class="bubble"> </i></li>
                    <li>elstan88@mail.ru <i class="mail"> </i></li>
                </ul>
            </div>
            <div class="container">
                <div class="contact-form">
                    <p>This is a great contact section for people to get a hold of you.The contact form works pretty slick it has a great confirmation message.</p>
                    <form method="post" action="contact-post.html">
                        <input type="text" class="textbox" value="Your Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Name';}">
                        <input type="text" class="textbox" value="Your Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Email';}">
                        <input type="text" class="textbox" value="Your Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Your Subject';}">
                        <textarea value="Message:" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Your Message</textarea>
                        <div class="contact_btn">
                            <label class="btn2 btn-2 btn2-1b"><input type="button" value="Submit"></label>
                        </div>
                    </form>
                </div>
            </div>
        </div>
</div>


<!-- js -->
<script src="js/classie.js"></script>
<script src="js/nav.js"></script>

<script type="text/javascript" src="js/bootstrap.js"></script>


<script type="text/javascript">
    $(document).ready(function() {
        $('#loading_wrap').hide();
        $('#fullpage').fullpage({
            anchors: ['Home', 'Portfolio', 'Blog', 'Contact'],
            navigation: true,
            navigationPosition: 'right',
            navigationTooltips: ['Home', 'Portfolio', 'Blog', 'Contact']
        });
        $(".swipebox").swipebox();
        $().UItoTop({ easingType: 'easeOutQuart' });
        $(".swipebox-with-description").hover(
                function() {
                    $(this).children("img").fadeTo(200, 0.85).end().children(".swipebox-description").css("display","table-cell");
                },
                function() {
                    $(this).children("img").fadeTo(200, 1).end().children(".swipebox-description").hide();
                });
        showLoading();
        $(window).on('hashchange', function(e){
            showLoading();
        });
    });
</script>

</body>
</html>